<template>

  <el-dialog v-model="dialogFormVisible" width="500" :title="windowType!=='local'?'输入视频信息':'导入视频'">
    <el-form v-if="windowType==='bili'" :model="form" :label-width="'80px'">
      <!-- <el-form-item label="avid" >
        <el-input v-model="form.avid" autocomplete="off" />
      </el-form-item>
      <el-form-item label="cid" >
        <el-input v-model="form.cid" autocomplete="off" />
      </el-form-item> -->
      <el-form-item label="iframe" >
        <el-input v-model="form.iframe" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-form v-else-if="windowType==='youtube'" :model="form" :label-width="'80px'">
      <el-form-item label="video id" >
        <el-input v-model="form.yid" autocomplete="off" />
      </el-form-item>

    </el-form>
    <!-- <el-form v-else-if="windowType==='local'" :model="form" :label-width="'160px'">
      <el-form-item label="directory(仅支持mp4)" >
        <el-input v-model="form.directory" autocomplete="off" />
      </el-form-item>

    </el-form> -->
    <FileSelector v-if="windowType==='local'" ref="fileDirectory" />
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false;">Cancel</el-button>
        <el-button type="primary" @click="handleSubmit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import FileSelector from './FileSelector.vue'


const emit=defineEmits(['sbmt'])
const dialogFormVisible = ref(false)
const fileDirectory=ref(null)


const form = reactive({
  iframe:'',
  yid:'',
  directory:''
})

const windowType=ref("")
const openDialog = (str:string) => {
  dialogFormVisible.value = true
  windowType.value=str
}
const handleSubmit=()=>{
  //@ts-ignore
  if (fileDirectory.value!==null && fileDirectory.value.fileInfo.path!=='' && fileDirectory.value.fileInfo.path!==undefined)form.directory=fileDirectory.value.fileInfo.path;
  //console.log(fileDirectory.value.fileInfo.path,form.directory,windowType.value)
  dialogFormVisible.value = false;
  emit('sbmt',windowType.value,form)
}
defineExpose({
    openDialog
})

</script>
<style scoped>
.el-form{
  margin-top: 10px;
}
.el-form-item {
  margin-right: 20px;
}
</style>